<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." id='img' />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script>

    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939


    // 功能列表
    // 功能1: 上传头像
    // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
    // 功能3: 省市区的联动效果
    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况



    // 要求： 
    // 1. 使用 axios 发送请求
    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能


    const dom = (ele) => document.querySelector(ele)
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'


    //获取个人信息渲染到页面
    async function getRender() {
      const { data: { data } } = await axios.get('/api/settings')
      console.log(data)
      dom('[name=nickname]').value = data.nickname
      dom('#img').src = data.avatar
      dom('[name=province]').value = data.province
      dom('[name=city]').value = data.city
      dom('[name=area]').value = data.area
    }
    getRender()

    //省市县
    async function fn() {
      //省
      const { data: proData } = await axios.get('/api/province')
      const proStr = proData.data.map(item => `<option value="${item}">${item}</option>`)
      dom('[name=province]').innerHTML = '<option value="">--省--</option>' + proStr
      //城市
      const { data: cityData } = await axios.get('/api/city', { params: { pname: '安徽省' } })
      const cityStr = cityData.data.map(item => `<option value="${item}">${item}</option>`)
      dom('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr
      //城市
      const { data: areaData } = await axios.get('/api/area', { params: { pname: '安徽省', cname: '合肥市' } })
      const areaStr = areaData.data.map(item => `<option value="${item}">${item}</option>`)
      dom('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr
    }
    fn()
    dom('[name=province]').addEventListener('change', async function () {
      console.log('11');
      //城市
      const { data: cityData } = await axios.get('/api/city', { params: { pname: this.value } })
      const cityStr = cityData.data.map(item => `<option value="${item}">${item}</option>`)
      dom('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr
      dom('[name=area]').innerHTML = '<option value="">--区--</option>'
    })
    dom('[name=city]').addEventListener('change', async function () {
      //城市
      const { data: areaData } = await axios.get('/api/area', { params: { pname: dom('[name=province]').value, cname: this.value } })
      const areaStr = areaData.data.map(item => `<option value="${item}">${item}</option>`)
      dom('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr
    })

    //头像上传
    dom('.figure').addEventListener('click', function () {
      dom('#upload').click()
    })
    dom('#upload').addEventListener('change', async function () {
      const fd = new FormData()
      fd.append('avatar', this.files[0])
      const { data } = await axios.post('/api/file', fd)
      dom('#img').src = data.data.url
    })


    //提交信息
    dom('.btn-primary').addEventListener('click', async function (e) {
      e.preventDefault()
      console.log(dom('#img').src, '111')
      const res = await axios.put('/api/settings', {
        nickname: dom('[name=nickname]').value,
        province: dom('[name=province]').value,
        city: dom('[name=city]').value,
        area: dom('[name=area]').value,
        avatar: dom('#img').src
      })
      console.log(res)
      getRender()
    })



  </script>
</body>

</html>